import { FC, useState, useEffect } from "react"
import styles from "./consultation.less"
import LabelWraper from "@/components/LabelWraper"
import LabelCard, { columnsProps } from "@/components/LabelCard"
import DataStatistics, { CardPro } from "@/components/DataStatistics"
import { ColumnsType } from "antd/es/table"
import { Select, Input, Button, Table, message } from "antd"
const { Option } = Select
// import { SelectType, selectList } from "@/utils/common.data"
import { history } from "umi"
import { consultList, Irecords, IConsultListParmas, overview, updateRemark } from "@/services/consultation"
import { getEnum, enumTypeList, ITypeEnum } from "@/services/common"
import ConsultationRemark from "./ConsultationRemark"
import { PAGESIZE, PAGE } from "@/configs/instance"



let list: Array<CardPro> = [
  {
    title: "总会诊数",
    value: 0
  },
  {
    title: "待审核会诊",
    value: 0
  },
  {
    title: "已结束会诊",
    value: 0
  },
  {
    title: "已完成会诊",
    value: 0
  }
]

/**
  * 获取会诊数
  */

const getOverview = () => {
  overview().then(res => {
    if (res.data) {
      list[0].value = res.data.totalCount
      list[1].value = res.data.toBeReviewedCount
      list[2].value = res.data.endedCount
      list[3].value = res.data.finishedCount
    }
  })
}

/**
   * 跳转详情
   */

const getDetail = (record: Irecords) => {
  if (record.id) {
    history.push({
      pathname: "/consultationManagement/consultationDetail",
      query: {
        consultId: (record.id).toString()
      },
    })
  }

}



const consultation: FC = () => {


  const [loading, setLoading] = useState<boolean>(false)
  const [tableScroll, setTableScroll] = useState<number>(500)
  const [current, setCurrent] = useState<number>(PAGE)
  const [size, setSize] = useState<number>(PAGESIZE)
  const [patientName, setPatientName] = useState<string>("")// 患者姓名
  const [status, setStatus] = useState<number | null>(null)// 会诊状态
  const [topic, setTopic] = useState<string>("")// 会诊主题
  const [recordList, setRecordList] = useState<Array<Irecords>>([])
  const [tableLoading, setTableLoading] = useState<boolean>(false)
  const [total, setTotal] = useState<number>(0)
  const [selectList, setSelectList] = useState<Array<ITypeEnum>>([])// 状态列表
  const [remarkRecord, setRemarkRecord] = useState<Irecords>()// 备注对象
  const [remarkShow, setRemarkShow] = useState<boolean>(false)// 是否显示备注


  /**
   * 修改备注
   */

  const changeRemark = (remarkShow: boolean, remark?: string | null | undefined, consultId?: number | null | undefined) => {
    if (remarkShow && consultId && remark) {
      updateRemark(consultId, remark).then(res => {
        message.success("修改备注成功")
      }).catch(error => {
        message.error(error.data ? error.data.message : "发出的请求是不存在的记录或服务器没有进行操作")
      })
      setRemarkShow(false)
    } else {
      setRemarkShow(false)
    }

  }

  /**
   * 显示备注
   */

  const showRemarkRecord = (record: Irecords) => {
    setRemarkRecord(record)
    setRemarkShow(true)
    reset()// 重置
  }

  const columns: ColumnsType<Irecords> = [
    {
      title: "序号",
      align: "center",
      width: "57",
      render: (_, __, index) => {
        // 生成序号
        return (
          <span>{(current - PAGE) * size + (index + 1)}</span>
        )
      },
    },
    {
      title: "会诊主题",
      dataIndex: "topic",
      key: "topic",
      align: "center",
      width: "auto",
    },
    {
      title: "会诊团队",
      dataIndex: "groupName",
      key: "groupName",
      align: "center",
      width: "auto",
    },
    {
      title: "患者姓名",
      dataIndex: "patientName",
      key: "patientName",
      align: "center",
      width: "auto",
    },
    {
      title: "开始时间",
      dataIndex: "startTime",
      key: "startTime",
      align: "center",
      width: "auto",
    },
    {
      title: "状态",
      dataIndex: "statusRes",
      key: "statusRes",
      align: "center",
      width: "auto",
    },
    {
      title: "联络员",
      dataIndex: "contactName",
      key: "contactName",
      align: "center",
      width: "auto",
    },
    {
      title: "会诊目的",
      dataIndex: "goal",
      key: "goal",
      align: "center",
      width: "auto",
    },
    {
      title: "备注",
      dataIndex: "remark",
      key: "remark",
      align: "center",
      width: "auto",
    },
    {
      title: "操作",
      align: "center",
      width: "auto",
      render: (_, record: Irecords) => {
        return (
          <div className={styles.editBox}>
            <span className={styles.bt1} onClick={() => { getDetail(record) }}>查看</span>
            <span className={styles.bt2} onClick={() => { showRemarkRecord(record) }}>备注</span>
          </div>
        )
      }
    }
  ]



  /**
   * 获取会诊列表
   */
  const getRecordList = async () => {
    setLoading(true)
    let parms: IConsultListParmas = {
      current, size, patientName, topic
    };
    (status && status !== -100) && (parms.status = status)

    consultList({ ...parms }).then((res: any) => {
      (res.data) && (setRecordList(res.data.records));
      (res.data) && (setTotal(res.data.total))
      setLoading(false)
    }).catch((error: any) => {
      setLoading(false)
      message.error(error.data ? error.data.message : "发出的请求是不存在的记录或服务器没有进行操作")
    })
  }

  /**
   * 重置
   */
  const reset = () => {
    setSize(PAGESIZE)
    setCurrent(PAGE)
    setPatientName("")
    setTopic("")
    getRecordList()

  }

  /**
   * 修改页码
   */
  const changeSize = (current: number, size?: number) => {
    (size) && (setSize(size))
    setCurrent(current)
    getRecordList()

  }

  /**
   * 搜索 search
   */
  const searchRecordList = () => {
    setSize(PAGESIZE)
    setCurrent(PAGE)
    getRecordList()
  }

  /**
   * 修改select
   */
  const onChangeSelect = (value: number) => {
    console.log(value)
    setStatus(value)
    getRecordList()
  }
  /**
   * 获取会诊状态
   */
  const getStateList = () => {
    getEnum(enumTypeList.consultStatus, true).then(res => {
      (res.data) && (setSelectList(res.data))
    })
  }



  useEffect(() => {
    getRecordList()
    getStateList()
    getOverview()
  }, [])


  return (
    <div className={styles.consultationBox}>
      <LabelWraper label="数据概览"
        loading={loading}
        labelTextClass={styles.labelTextClass}
        labelWraperBodyClass={styles.dataStatisticsLabelWraperBody}
        labelWraperHeaderClass={styles.labelWraperHeaderClass}
      >
        <DataStatistics list={list} />
      </LabelWraper>
      <div className={styles.consultationMain}>
        <div className={styles.screenList}>
          <Select
            className={styles.selectList}
            defaultValue={-100}
            onSelect={(value: number) => { onChangeSelect(value) }}>
            {
              selectList && selectList.length > 0 ? selectList.map((item: ITypeEnum) => {
                return <Option key={item.value} value={item.value}>{item.str}</Option>
              }) : ""
            }
          </Select>
          <div className={styles.screenListFlex} />
          <Input className={styles.input} onChange={(e) => { setPatientName(e.target.value) }} placeholder='请输入患者姓名' />
          <Input className={styles.input} onChange={(e) => { setTopic(e.target.value) }} placeholder='请输入会诊主题' />
          <Button className={styles.search} onClick={() => { searchRecordList() }}>搜索</Button>
          <Button className={styles.reset} onClick={() => { reset() }}>重置</Button>
        </div>
        <Table
          bordered
          rowKey='id'
          className={styles.consultationTable}
          columns={columns}
          dataSource={recordList}
          loading={tableLoading}
          pagination={{
            current: current,
            pageSize: size,
            total: total,
            onChange: (page: number, pageSize?: number) => { changeSize(page, pageSize) },
            showQuickJumper: true,
            style: { paddingRight: 30 }
          }}
        />
      </div>
      {/* 修改备注 */}
      <ConsultationRemark remarkRecord={remarkRecord} remarkShow={remarkShow} changeRemark={changeRemark} />

    </div >
  )
}

export default consultation
